<template>
  <view class="stock-list-container">
    <!-- 标题 -->
    <view class="title">股票列表</view>
    <view class="container">
      <!-- 上证A股标题 -->
      <view class="sub-title"></view>
      <!-- 列表内容 -->
      <view class="list">
        <view
          class="list-item"
          v-for="(item, index) in stockList"
          :key="index"
          @click="ToDetail(item.id)"
        >
          <view class="item-index">{{ index + 1 }}</view>
          <view class="item-info">
            <view class="item-name">{{ item.name }}</view>
            <view class="item-code">{{ item.code }} -- {{ item.company }}</view>
          </view>
          <!-- 新增右侧箭头 -->
          <u-icon class="arrow-icon" name="arrow-right" color="#999" size="16"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref,onMounted} from "vue";
import axios from 'axios';
import { useRoute } from "vue-router";
const ToDetail = (itemId: string) => {
  uni.navigateTo({
    url: `/pages/detail?id=${itemId}`,
  });
};
const stockList = ref([]);
const boardId = useRoute().query.id;
onMounted(async () => {
  try {
    const res = await axios.get('/stock/list/by_board/'+boardId);
    console.log(res.data.data);
    stockList.value = res.data.data;
  } catch (error) {
    console.error('获取板块列表失败:', error);
  }
});
</script>

<style scoped>
.stock-list-container {
  background-color: #b3b3b3;
  height: 100vh;
}
.title {
  padding-top: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.container {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 10px 15px;
  background-color: #fff;
  height: 100vh;
}
.sub-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}
.list {
  border-radius: 5px;
}
.list-item {
  display: flex;
  align-items: center;
  padding: 10px;
}
.item-index {
  width: 20px;
  text-align: center;
  color: #666;
  margin-right: 10px;
}
.item-info {
  flex: 1;
}
.item-name {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
}
.item-code {
  font-size: 13px;
  color: #999;
}
/* 新增箭头样式 */
.arrow-icon {
  width: 16px;
  height: 16px;
  margin-left: 10px;
  opacity: 0.6;
}
</style>
